<template>
  <div class="add_channels_wrap">
    <el-button
      type="primary"
      size="small"
      @click="pop_show = true"
      class="pull-right"
      >新增商品图片</el-button
    >
    <el-dialog title="新增商品图片" :visible.sync="pop_show" append-to-body>
      <el-form
        :model="PicturesForm"
        status-icon
        :rules="rulesBrandsForm"
        ref="BrandsForm"
        label-width="100px"
      >
        <el-form-item label="SKU商品：" prop="content_type">
          <el-select v-model="PicturesForm.sku" size="small">
            <el-option
              v-for="item in sku_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 上传图片 -->
        <!-- :action="host + '/goods/sku_image/'" -->
        <el-form-item label="商品图片" prop="image">
          <el-upload
            action="http://up-z2.qiniup.com"
            :on-success="uploadSuccess"
            :data="upload_data"
            :on-error="uploadError"
            :auto-upload='true'
          >
            <el-button size="small" type="primary">点击选择图片</el-button>
          </el-upload>

        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm('ChannelsForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import cons from "@/components/constant";
let token = localStorage.token;
export default {
  name: "AddChannels",
  data() {
    return {
      host:cons.apis,
      pop_show: false,
      baseUrl: "http://r8isbvnn5.bkt.clouddn.com/",
      imgUrl: "",
      upload_data: {
        token: "",
      },
      sku_list: [],
      PicturesForm: {
        sku: "",
        image: "",
      },
      rulesBrandsForm: {},
    };
  },
  methods: {
    // 提交
    submitForm() {
      // let fd = new FormData();
      // fd.append("sku", this.PicturesForm.sku);
      // fd.append("image", this.imgUrl);

      this.axios
        .post(cons.apis + "/goods/imgs/", this.PicturesForm, {
          headers: {
            Authorization: "JWT " + token,
            // "Content-Type": "multipart/form-data",
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log('添加图片的响应',dat);
          if (dat.status == 201) {
            this.$message({
              type: "success",
              message: dat.data.msg,
            });
            this.pop_show = false;
            this.$emit("fnResetTable");
            this.resetForm("ChannelsForm");
          }else{
            this.$message({
              type: "error",
              message: dat.data.msg,
            });
          }
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    // 获取所有的sku
    fnGetSkuList() {
      this.axios
        .get(cons.apis + "/goods/skulist/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log(dat.data);
          this.sku_list = dat.data;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取token
    get_token() {
      this.axios
        .get(cons.apis + "/goods/qiniu/token/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log("获取七牛云token响应>>>",dat);
          this.upload_data.token = dat.data.token;
          console.log("七牛云链接响应>>>",);
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    // 点击上传，上传成功触发的方法
    uploadSuccess(res, file) {
      // 拼接图片地址
      // this.imgUrl = this.baseUrl + res.key;
      console.log("上传图片触发的>>>", res);
      //上传到七牛云 
      this.PicturesForm.image = 'http://' + 'rbnr1xgbm.hn-bkt.clouddn.com' + '/' + res.key
      console.log("imgurl>>>", this.imgUrl);

      // 上传django写法
      // this.PicturesForm.image ='/' +  res.static_path + '/' + file.name

      // console.log("imgurl>>>", this.imgUrl);
    },
    uploadError(err) {
  
      console.log("上传图片失败的响应>>>",err);
    },
  },

  mounted() {
    // 七牛云 后端获取token
    this.get_token();

    // django获取token
    // this.upload_data.token = token;
    this.fnGetSkuList();
  },
};
</script>
